<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas">你的浏览器不支持canvas</canvas>

</body>
<script>
    // 1、获取当前的画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布的大小样式
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'

// 2、小球类
class Ball {
    constructor (x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.r = 40;
    }

    // 绘制小球
    render () {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r , 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }

}

// 3、会移动小球的类
class MoveBall extends Ball { // 继承
    constructor (x, y, color) {
        super(x, y, color);

        // 量的变化  
        // 小球的随机坐标
        this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // 半径变小的随机数
        this.dR = Random(1, 3);
    }

    // 4、改变小球的位置和半径
    upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // 判断小球的半径是否小于0
        if(this.r < 0) {
            this.r = 0
        }
    }

}

// 5、实例化小球

// 存放产生的小球
let ballArr = [];

// 定义随机函数  如果引用了underscore-min.js 就不用写随机函数，可以直接用  _.random
let Random = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

// 监听鼠标的移动
canvas.addEventListener('mousemove', function (e){
    // 随机颜色 
    // 也可以固定颜色数组 let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    let bgColor =  `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ballArr);
})

// 开启定时器 
setInterval(function () {

    // 清屏
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制小球
    for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

// 作者：性感的小肥猫
// 链接：https://juejin.cn/post/6970443662681440292
// 来源：掘金
// 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
</script>
</html>